<template>
  <div class="comment">
    <div class="submitbox">
      <div>
        <van-cell-group>提交评论
          <van-field
            v-model="value"
            placeholder="请输入评论"
            class="subComment"
            label="留言:"
            type="textarea"
            rows="1"
            autosize
          ></van-field>
        </van-cell-group>
        <van-button plain type="primary" @click="handlePublish">发表</van-button>
      </div>
    </div>
    <div class="commentbox">
      <h3 class="line"></h3>
      <ul >
        <li>
          <h4>评论详情</h4>
        </li>
        <li v-for="item in commentList" :key="item.id">
          <h4 class="comment-content">{{item.content}}</h4>
          <p class="comment-info">
            <span class="comment-user">{{item.user_name}}</span>
            <span class="comment-time">{{item.add_time | dateFormat}}</span>
          </p>
        </li>
      </ul>
    </div>
    <div class="button-group">
      <van-button type="primary" v-if="hasMore" @click="showMore">加载更多</van-button>
      <van-button type="danger" v-else>我是有底线的</van-button>
    </div>
  </div>
</template>
<script>
import { getComment, publishComment } from '@/api'
import qs from 'qs'
export default {
  data () {
    return {
      pageindex: 1,
      commentList: [],
      value: '',
      hasMore: true
    }
  },
  props: {
    id: {
      type: Number
    }
  },
  created () {
    this.initCommentList()
  },
  methods: {
    initCommentList () {
      this.hasMore = true
      getComment(this.id, this.pageindex).then(res => {
        console.log(res)
        this.commentList = [...this.commentList, ...res.data.message]
        console.log(this.commentList)
        if (res.data.message.length < 10) {
          this.hasMore = false
        }
      })
    },
    showMore () {
      this.pageindex += 1
      this.initCommentList()
    },
    handlePublish () {
      let obj = { content: this.value }
      let str = qs.stringify(obj)
      console.log(str)
      if (!this.value.trim()) {
        this.$toast('内容不能为空')
      } else {
        publishComment(this.id, str)
          .then(res => {
            console.log(res)
            if (res.data.status === 0) {
              this.$toast('添加成功')
              this.value = ''
              this.commentList = []
              this.pageindex = 1
              this.initCommentList()
            }
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .comment {
    .submitbox {
      margin-top: 10px;
      .subComment {
        height: 100px;
        border: 1px solid black;
        margin: 5px 0 5px 0;
        .van-field__label {
          max-width: 44px;
      }
      }

    }
    .commentbox {
      ul {
        margin-top: 5px;
        li {
          h4 {
            padding: 5px;
            color: #ccc;
            font-size: 14px;
          }
        }
      }
      .comment-info {
        color: skyblue;
        font-size: 12px;
      }
    }
    .button-group {
      .van-button {
        width: 100%;
      }
    }
  }
</style>
